<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .cur {
      cursor: pointer;
    }
    .check_box {
      width: 300px;
      height: 40px;
      border: 1px solid #ccc;
      background: linear-gradient(180deg, #ffffff 0%,#f3f3f3 100%);
      margin: 20px auto;
      transition: .7s;
      position: relative;
    }
    .check_box:hover {
      background: linear-gradient(0deg, #ffffff 0%,#f3f3f3 100%);
    }
    .loading {
      width: 32px;
      height: 32px;
      float: left;
      position: absolute;
      top: 50%;
      margin: -15px 0 0 5px;
    }
    .loading_box {
      width: 100%;
      height: 100%;
      border: 1px solid #C6D5F8;
      box-shadow: inset 0 0 0 1px #3873ff;
      border-radius: 100%;
      overflow: hidden;
    }
    @keyframes geetest_wait_compute {
        60% {
            -moz-transform: scale(0.75);
            -ms-transform: scale(0.75);
            -webkit-transform: scale(0.75);
            transform: scale(0.75)
        }
    }

    .check_box:hover .loading {
      animation: geetest_wait_compute 0.8s linear infinite both
    }
    .loading_inner {
      width: 50%;
      height: 50%;
      background: #3873ff;
      border-radius: 50%;
      margin: 8px auto;
    }
    .loading_inner .loading_line {
      height: 8px;
      width: 3px;
      background: #3873ff;
      position: absolute;
      top: 1px;
      left: 15px;
    }
    
  </style>
</head>
<body>
  <!-- linear-gradient -->
    <div class="check_box cur">
      <div class="loading">
        <div class="loading_box">
          <div class="loading_inner">
            <div class="loading_line"></div>
          </div>
        </div>
      </div>
      <div class="text"></div>
    </div>
  <script>
    var loading = document.querySelector('.loading_box');
    var l = loading.getBoundingClientRect().left + 16;
    var t = loading.getBoundingClientRect().top + 16;
    document.onmousemove = function(e) {
      var w = e.clientX - l, h = e.clientY - t;
      var deg = 360*(Math.atan2(h,w)/(2*Math.PI));
      loading.style.transform = `rotate(${deg + 90}deg)`;
    }
  </script>
</body>
</html>